<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0', float: 'left' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>信息发布</BreadcrumbItem>
      <BreadcrumbItem>频道管理</BreadcrumbItem>
    </Breadcrumb>
    <ButtonGroup :style="{ margin: '15px 0', float: 'right' }">
      <Button @click="CreateChannel" type="primary">新建</Button>
    </ButtonGroup>
    <Content class="layer-content">
      <Form class="search" inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select placeholder="频道分类" clearable @on-change="channelSelector">
            <Option v-for="(item,index) in seletions" :value="item.id" :key="index">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border row-key="channelId" :load-data="subLoad" :update-show-children="true" :columns="columnData" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>

      <Modal title="编辑频道" width="60%" :footer-hide="true" v-model="showUpdate">
        <Update :callbank="callbackEvent" :dataBus="channelData" :key="keyIndex"></Update>
      </Modal>
      <Modal title="新建频道" width="60%" :footer-hide="true" v-model="showCreate">
        <Create :callbank="callbackEvent" :dataBus="channelData" :key="keyIndex"></Create>
      </Modal>
    </Content>
  </div>
</template>
<script>
import Update from "./update.vue";
import Create from "./create.vue"
export default {
  data() {
    return {
      showUpdate: false,
      showCreate: false,
      channelData: {},
      keyIndex: 0,
      keywords: null,
      dataGrid: [],
      checkedArray: [],
      pageTotal: 0,
      newChannels: [],
      seletions: this.$dict.channelType.data,
      query: {
        equal: {
          channelPid: '0'
        },
        pageIndex: 1,
        pageSize: 15
      },
      columnData: [
        {
          title: "频道名称",
          key: "channelName",
          tree: true
        },
        {
          title: "频道ID",
          key: "channelId"
        },
        {
          title: "频道分类",
          key: "channelTypeText",
        },
        {
          title: "状态",
          key: "channelStatusText",
          width: 120,
        },
        {
          title: "创建时间",
          key: "postTime",
          sortable: true,
          width: 150,
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.AddChild(params.row)}}},"添加子频道"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.EditChannel(params.row)}}},"编辑"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.Delete(params.row)}}},"删除")
                  ]
                ),
              ]
            )
          }
        }
      ]
    };
  },
  components: {
    Update: Update,
    Create: Create
  },
  computed: {
    
  },
  methods: {
    //重置
    reset() {
      delete this.query.sqlLike
      delete this.query.equal.channelType
      this.keywords = null
      this.Init()
    },
    //搜索
    searchGet() {
      let sqlLike = {
        fields: ['channel_name'],
        keyword: this.keywords
      }
      this.query.sqlLike = sqlLike
      this.Init()
    },
    Selector(selection) {
      this.checkedArray = [];
      selection.forEach((element) => {
        this.checkedArray.push(element.newsId);
      });
    },
    channelSelector(id) {
      if(!this.query.equal) this.query.equal = {}
      this.query.equal.channelType = Number(id)
      this.Init()
    },
    //初始化渠道
    Init() {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-msg",
        url: "/v1.0/news/channel/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            data.list.forEach(element => {
              element.channelTypeText = this.$dict.channelType.name(element.channelType)
              element.channelStatusText = element.channelStatus === 0 ? '关闭' : '开启'
              element.postTime = this.$date(element.postTime,'yyyy-MM-dd')
            })
            this.dataGrid = data.list
            this.pageTotal = data.count
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get()
    },
    subLoad(item, callback) {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-msg",
        url: "/v1.0/news/channel/page",
        query: {
          equal: {
            channelPid: item.channelId
          },
          orderBy: {
            asc: true,
            fields: ['sort_index']
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            data.list.forEach(element => {
              element.channelTypeText = this.$dict.channelType.name(element.channelType)
              element.channelStatusText = element.channelStatus === 0 ? '关闭' : '开启'
              element.postTime = this.$date(element.postTime,'yyyy-MM-dd')
            })
            console.log(data.list,'子列表2')
            callback(data.list)
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).get()
    },
    Delete(item) {
      return false
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-msg",
        url: "/v1.0/news/channel",
        data: {
          pojo: [item.channelId],
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.Init();
          } else {
            this.$Notice.error({
              title: "删除失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).delete()
    },
    EditChannel(channel) {
      this.channelData = channel
      this.showUpdate = true
    },
    AddChild(channel) {
      this.channelData = channel
      this.showCreate = true
    },
    CreateChannel() {
      this.channelData = {}
      this.showCreate = true
    },
    callbackEvent() {
      this.showUpdate = false
      this.showCreate = false
      this.keyIndex ++
      this.Init()
    }
  },
  created() {
    this.Init()
  },
};
</script>